<template>
  <div class="search">
    <el-card shadow="hover" class="search-view">
      <template #header>
        <h4>关键词搜索</h4>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-icon class="el-icon--right">
              <MoreFilled />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item>
              <el-dropdown-item divided>Action 5</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <el-table :data="tableData">
        <el-table-column label="排名" prop="rankNo"></el-table-column>
        <el-table-column label="关键字" prop="word"></el-table-column>
        <el-table-column label="搜索数量" prop="count"></el-table-column>
        <el-table-column label="搜索用户数" prop="user"></el-table-column>
        <el-table-column label="搜索占比" prop="range"></el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" :total="tableTotalData.length" v-model:current-page="currentPage" :page-size="pageSize">
      </el-pagination>
    </el-card>
    <el-card shadow="hover" class="search-view">
      <template #header>
        <h4>分类销售排行</h4>
        <el-radio-group v-model="radioSelect" size="small">
          <el-radio-button label="品类">品类</el-radio-button>
          <el-radio-button label="商品">商品</el-radio-button>
        </el-radio-group>
      </template>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
name:'footView'
}
</script>

<script lang="ts" setup>
import useFormat from '@/hooks/useFormat';
import { useReportDataStore } from '@/stores/reportData';
import { computed, ref } from 'vue';
const radioSelect = ref('品类')
const { numberFormat } = useFormat()
const currentPage = ref(1)
const pageSize = ref(5)
const dataStore = useReportDataStore()
const saleRank = computed(() => dataStore.reportData.saleRank)

// 准备数据
const searchWord = computed(() => dataStore.reportData.searchWord)
// 列表数据,总数据
const tableTotalData = computed(() => {
  if (!searchWord.value) return []
  return searchWord.value.map((item, index) => ({
    ...item,
    rankNo: index + 1,
    range: (item.user / item.count * 100).toFixed(2) + '%',
  }))
})
//每页显示的数据
const tableData = computed(() => {
  return tableTotalData.value.slice((currentPage.value - 1) * pageSize.value,currentPage.value * pageSize.value+2)
})
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  .search-view {
    flex: 1;
    cursor: pointer;
    &:first-child {
      margin-right: 10px;
    }
    &:last-child {
      margin-left: 10px;
    }
    :deep(.el-card__header) {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h4 {
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
}

</style>